<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="output">
    </ul>
    <!-- 
        前后端是同时开发的，意味着前端先模拟数据，先商量。
        可以让后端在写代码前，先给出接口定义：
        需要前端给后端发送什么参数
        后端会返回给前端什么格式的数据
    -->
    <script>
        var output = document.querySelector("#output")
        // 1.创建请求对象,返回一个异步请求对象
        var xhr =  new XMLHttpRequest()

        // 4. 监听异步请求对象xhr的状态，处理服务器返回数据
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4) {
                console.log(8888)
                //xhr.responseText：保存服务器返回的数据（从服务器返回的数据是“字符串”）。
                var arr = JSON.parse(xhr.responseText)
                // JSON.parse() 将字符串转成对象（数组也是对象）
                // 将数组对象显示在output
                output.innerHTML = arr.map(function(item){
                    return ` <li>
                            <h1>${item.title}</h1>
                            <p>价格: ${item.price}</p>
                        </li>`
                }).join('')
            }
        }


        // 2.设置请求参数，建立与服务器连接
        // xhr.open(请求方式，路径，是否异步)
        // 异步：允许同时做很多事
        // 2.1 get post
        xhr.open('get', '../json/goodslist.json', true)

        // 3. 向服务器发送请求
        // get请求 xhr.send(null)
        // post请求 xhr.send(参数)
        xhr.send(null)

        //==============若为false，必须等待请求完成，才能继续往下执行代码
        console.log(666)

        
    </script>
</body>
</html>